
.index{
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;

  .slide{
    width: 100%;
    height: 280rpx;
    border-radius: 16rpx;
    overflow: hidden;
    swiper image{
      width: 100%;
      height: 100%;
      border-radius: 16rpx;

    }
  }
  .mold-class{
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;
    view{
      width: 302rpx;
      height: 104rpx;
      border-radius: 20rpx;
      border: 2rpx solid #F7CF4E;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #F7CF4E;
      &.mold-active{
        color: #333333;
        background-color: #F1D065;
      }
    }
  }
  .topic-container{
    height: 100px;
    flex: 1;
    width: 100%;
    margin-top: 38rpx;
    .item{
      display: flex;
      padding: 32rpx 30rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      position: relative;
      &.doing{
        background: #FFF9E9;
      }
      &.no-doing{
        background: #F6F6FF;
      }
      &.did{
        background: #F5F5F5;
      }
      .right-top{
        position: absolute;
        top: 0;
        right: 0;
        view{
          width: 138rpx;
          height: 46rpx;
          border-radius: 0px 20rpx 0px 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          &.doing{
            color: #FFFFFF;
            background: #F1B419;
          }
          &.no-doing{
            background: #E7E8FD;
            color: #695EF8;
          }
          &.did{
            background: #DFDFDF;
            color: #000000;
          }
        }
        image{
          width: 60rpx;
          height: 46rpx;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      >image{
        width: 114rpx;
        height: 114rpx;
        margin-right: 28rpx;
      }
      .progress{
        display: flex;
        align-items: center;
        >view{
          width: 414rpx;
          height: 6rpx;
          background: #FEF0BB;
          border-radius: 4rpx;
          margin-right: 12rpx;
          position: relative;
          view{
            background-color: #F1B419;
            border-radius: 20rpx;
            height: 6rpx;
            left: 0;
          }

        }
        text{
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F7CF4E;
        }
      }
      .content{
        display: flex;
        flex-direction: column;
        .name{
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
        }
        .count{
          display: flex;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-top: 10rpx;
          color: #A0A0A0;
          .sum{
            margin-right: 20rpx;
          }
          .jump{
            margin-right: 12rpx;
          }
        }
      }
    }
  }
}
